<template>
  <div>
    <el-container>
      <el-header class="header">
        <el-button type="primary" size="small" @click="showDialog">新增</el-button>
      </el-header>
      <el-main>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="id" label="id"></el-table-column>
          <el-table-column prop="name" label="姓名"></el-table-column>
          <el-table-column prop="phone" label="手机号"></el-table-column>
          <el-table-column prop="telephone" label="住宅电话"></el-table-column>
          <el-table-column prop="address" label="地址"></el-table-column>
          <el-table-column prop="username" label="用户名"></el-table-column>
          <el-table-column fixed="right" label="操作" width="300px">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="primary" size="small">查看</el-button>
              <el-button type="warning" size="small">编辑</el-button>
              <el-button type="success" size="small">重置</el-button>
              <el-button type="success" size="small" @click="showRoleDialog(scope.row)">授权</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          class="pagination"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </el-main>
    </el-container>

    <!-- Form -->

    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
      <el-form>
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input auto-complete="off" v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input auto-complete="off" v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item label="手机号" :label-width="formLabelWidth">
          <el-input auto-complete="off" v-model="form.phone"></el-input>
        </el-form-item>
        <el-form-item label="地址" :label-width="formLabelWidth">
          <el-input auto-complete="off" v-model="form.address"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>

    <!--用户授权-->

    <el-dialog title="用户授权" :visible.sync="dialogUserRole">
      <el-checkbox
        :indeterminate="isIndeterminate"
        v-model="checkAll"
        @change="handleCheckAllChange"
      >全选</el-checkbox>
      <div style="margin: 15px 0;"></div>
      <el-checkbox-group v-model="checkedRoles" @change="handleCheckedCitiesChange">
        <el-checkbox v-for="role in roles" :label="role.id" :key="role.id">{{role.nameZh}}</el-checkbox>
      </el-checkbox-group>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogUserRole = false">取 消</el-button>
        <el-button type="primary" @click="saveUserRole()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  methods: {
    showDialog() {
      this.clear();
      this.dialogFormVisible = true;
    },
    saveUserRole() {
      var $this = this;
      this.$ajax({
        url: "http://localhost:8081/userRole",
        method: "post",
        data: {
          uid: $this.user.id,
          rids: $this.checkedRoles
        }
      }).then(function(res) {
        console.log("用户授权完成返回结果为{}", res);
        if (res.data.code == 200) {
          $this.$message("授权成功");
        } else {
          $this.$$message("授权失败");
        }
      });
    },
    showRoleDialog(row) {
      console.log(row);
      this.user = row;
      this.dialogUserRole = true;
      var $this = this;
      this.$ajax({
        url: "http://localhost:8081/role/getRolesList",
        method: "get"
      }).then(function(res) {
        console.log("查询角色列表{}", res);
        if (res.data.code == 200) {
          $this.roles = res.data.object;
        }else{
          $this.$message(res.data.msg);
        }
      });

      this.$ajax({
        url: "http://localhost:8081/role/getRolesByUserID",
        method: "get",
        params:{uid:row.id}
      }).then(function(res) {
        console.log("根据uid查询角色列表{}", res);
        if (res.data.code == 200) {
          var array = [];
          res.data.object.forEach(e=>{
            array.push(e.id);
          });
          $this.checkedRoles = array;

          
        }
      });
    },
    handleCheckAllChange(val) {
      var checkedRoleids = [];
      this.roles.forEach(e => {
        checkedRoleids.push(e.id);
      });
      this.checkedRoles = val ? checkedRoleids : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      console.log("选中的数组为{}", value);
      console.log("选中的保存数组为{}", this.checkedRoles);
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.roles.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.roles.length;
    },
    clear() {
      for (var key in this.form) {
        this.form[key] = "";
      }
    },
    save() {
      var $this = this;
      this.dialogFormVisible = false;
      console.log(this.form);
      this.$ajax({
        url: "http://localhost:8081/user",
        method: "post",
        params: this.form
      }).then(function(res) {
        if (res.data.code == 200) {
          $this.$message(res.data.msg);
          this.getData();
        }
      });
    },
    handleClick(row) {
      console.log(row);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getData();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage4 = val;
      this.getData();
    },
    getData() {
      var $this = this;
      var params = {
        pageSize: this.pageSize,
        pageNo: this.currentPage4
      };
      this.$ajax({
        method: "get",
        url: "http://localhost:8081/user/list",
        params: params
      }).then(function(res) {
        console.log(res);
        $this.tableData = res.data.object.records;
        $this.total = res.data.object.total;
      });
    }
  },
  data() {
    return {
      tableData: [],
      currentPage4: 1,
      pageSize: 2,
      pageSizes: [1, 2, 3, 4],
      total: 10,
      title: "save",
      formLabelWidth: "120px",
      dialogTableVisible: false,
      dialogFormVisible: false,
      dialogUserRole: false,
      isIndeterminate: true,
      checkAll: false,
      user: null,
      checkedRoles: ["技术经理"],
      roles: ["技术经理", "java攻城狮", "php攻城狮"],
      form: {
        name: "",
        username: "",
        password: "",
        phone: "",
        address: ""
      }
    };
  },
  mounted() {
    this.getData();
  }
};
</script>
<style>
.pagination {
  float: right;
  margin-top: 20px;
}
.header {
  margin-top: 30px;
}
</style>

